<template>
	<view>
		<view class="auth">
			<view class="title">
				手机号
			</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input 
						placeholder="请输入手机号" 
						type="number" 
						maxlength="11" 
						confirm-type="next" 
						placeholder-class="placeholder" 
						name="mobile"  
						v-model="mobile"
					></input>
				</view>
				<view class="title">
					验证码
					<text v-if="countdown > 0" class="time">{{ countdown }}秒后重新发送</text>
					<text v-if="countdown == 0" class="auth-agains" @tap="resend">获取验证码</text>
				</view>
				<view class="auth-group radius-bock  wlian-grey-light" style="padding: 0;justify-content: center;">
					<view class="xx">
						<yi-code :width="620" hide="*" @onComplete="e=>code = e"></yi-code>
					</view>
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock an" form-type="submit">修改手机号</button><!-- disabled="true" -->
				</view>
				
			</form>
		</view>
		
	</view>
</template>
<script>
import graceChecker from '@/common/graceChecker';//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
export default {
	data() {
		return {
			cTimer: null,
			countdown: 0,
			mobile: '',
			code:''
		};
	},
	
	methods: {
		sendMessage() {
			// await
			uni.request({
				url: '/wanlshop/sms/send',
				method: 'POST',
				data: {
					event: 'changemobile',
					mobile: this.mobile
				},
				success: (res) => {
					console.log(222222,res);
					if(res.code == 1){
						this.$wanlshop.msg('验证码发送成功');
						this.countdown = 60;
						this.startTimer();
					}else{
						this.$wanlshop.msg(res.msg)
					}
				}
			});
		},
		startTimer() {
			if (this.cTimer == null) {
				this.cTimer = setInterval(() => {
					this.countdown--;
					if (this.countdown == 0) {
						this.clearTimer();
					}
				}, 1000);
			}
		},
		clearTimer() {
			clearInterval(this.cTimer);
			this.cTimer = null;
		},
		resend() {
			var rule = [
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
			];
			//进行表单检查
			var formData = {
				mobile:this.mobile
			};
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				
				this.sendMessage();
			} else {
				this.$wanlshop.msg(graceChecker.error);
			}
			
		},
		formSubmit(e) {
			
			//将下列代码加入到对应的检查位置
			//定义表单规则
			var rule = [
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				console.log( e.detail.value);
				if(!this.code){
					this.$wanlshop.msg('请填写验证码');
					return;
				}
				uni.request({
					url: '/user/changemobile',
					method: 'POST',
					data: {
						mobile: this.mobile,
						captcha: this.code
					},
					success: (res) => {
						uni.showToast({
							icon: 'none',
							title: '手机号修改成功'
						});
						this.$wanlshop.back();
					},
					complete: () => {}
				});
			} else {
				this.$wanlshop.msg(graceChecker.error);
			}
		},
		
		
	}
};
</script>

<style>
	@import url("auth.css");
	page{
		background-color: #f9f9f9;
	}

.auth {
	background-color: #fff;
	border-radius: 20rpx;
	width: 700rpx;
	margin: 0 auto;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	.title {
		padding: 30rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: space-between;
	}
	.yi-code-show-item {
		width: 92rpx !important;
		height: 98rpx !important;
	}
	
}

	
	.auth-agains  {
		color: #ed6d0f;
	}
	
	 .time {
		color: #9a9a9a;
	}
</style>
